<template>
  <div class="category">
    <el-card shadow="never" :body-style="{ padding: ' 0 20px' }">
      <div slot="header">
        <span>分类管理</span>
      </div>
      <div class="section">
        <div class="main-header">乐居分类:</div>
        <div class="main-body">
          <el-card v-for="item in category" :key="item.id" shadow="hover">
            <div slot="header">
              <span>{{ item.name }}</span>
            </div>

            <div @click="setIndex(item)">
              <el-upload
                :headers="headers"
                class="avatar-uploader"
                :action="baseUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <el-image
                  v-if="item.icon"
                  class="avatar"
                  :src="item.icon"
                  fit="fill"
                  :lazy="true"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </div>
          </el-card>
        </div>
      </div>
      <div class="section">
        <div class="main-header">全部分类:</div>
        <div class="main-body">
          <el-table
            size="small"
            :data="categoryList"
            border
            stripe
            row-key="id"
          >
            <el-table-column
              label="菜单名称"
              prop="name"
              align="left"
              width="120"
            />
            <el-table-column label="icon" align="center" width="180">
              <template slot-scope="scope">
                <div>
                  <el-image
                    :src="scope.row.icon"
                    fit="fill"
                    style="width: 80px; height: 80px"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="排序"
              prop="sort"
              align="center"
              width="120"
            />
            <el-table-column label="显示状态" align="center">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.showStatus == 0 ? '显示' : '不显示' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="导航栏扩展" align="center">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.navStatus == 0 ? '展示' : '不展示' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="描述" prop="description" align="center" />
            <el-table-column
              label="创建时间"
              prop="createTime"
              align="center"
            />
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getAllCategory,
  updateCategory
} from '@/api/commodities/category/index'
import mixins from '@/mixins/index'
export default {
  mixins: [mixins],
  data() {
    return {
      categoryList: [],
      selected: {},
      category: []
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      getAllCategory().then((res) => {
        res.data.items.forEach((el) => {
          el = Object.assign(el, el.category)
        })
        this.category = res.data.items[1].children
        this.categoryList = res.data.items
      })
    },
    handleAvatarSuccess(res) {
      if (res.success) {
        this.$confirm('图片上传成功,是否切换?').then(() => {
          updateCategory({
            id: this.selected.id,
            level: this.selected.level,
            parentId: this.selected.parentId,
            icon: res.data.fileUrl
          }).then((resolve) => {
            if (resolve.success) {
              this.$message.success('修改成功!')
              this.init()
            } else {
              this.$message.error(resolve.message)
            }
          })
        })
      } else {
        this.$message.error('上传图片失败!')
        return
      }
    },
    setIndex(item) {
      this.selected = Object.assign({}, item)
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (!isLt1M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
      }
      return isLt1M
    }
  }
}
</script>

<style scoped lang="scss">
.category {
  .section {
    margin-top: 30px;
    .main-header {
      font-weight: bold;
    }
    .main-body {
      display: flex;
      justify-content: space-between;
      .el-card {
        margin-top: 30px;
        width: 24%;
        .el-upload {
          width: 100%;
          margin: 0 auto;
          .el-image {
            width: 100%;
            height: 330px;
          }
        }
      }
      .el-table {
        margin-top: 30px;
      }
    }
  }
}
</style>
